<template>
    <div class="search">
        <Card>
            <Form ref="searchForm" :model="queryParam" inline :label-width="70" class="search-form">
                <Form-item label="字典名称" prop="dictName">
                    <Input type="text" v-model="queryParam.dictName" placeholder="请输入字典名称" clearable style="width: 200px" />
                </Form-item>
                <Form-item label="类型值" prop="dictType">
                    <Input type="text" v-model="queryParam.dictType" placeholder="请输入类型值" clearable style="width: 200px" />
                </Form-item>
                <Button @click="reloadData" type="primary" icon="ios-search" class="search-btn">搜索</Button>
                <Button @click="reloadData(true)" type="primary" icon="ios-refresh" class="search-btn">重置</Button>
            </Form>
            <div class="table-operate-area">
                <Button @click="handleAdd" type="primary" icon="ios-add">新增</Button>
                <Button @click="handleRefreshCache" type="primary" icon="ios-sync">刷新缓存</Button>
            </div>
            <Table :loading="loading" border :columns="columns" :data="dataSource" ref="table" class="mt_10"></Table>
            <Row type="flex" justify="end" class="mt_10">
                <Page v-bind="pageOption" v-on="pageListener"></Page>
            </Row>
        </Card>
        <EditModel ref="editModel" @success="reloadData"/>
        <DictdataModal ref="dictdataModal"/>
    </div>
</template>
  
<script>
import { SimpleTableMixins } from '@/mixins/SimpleTableMixins.js'
import { getDictTypes, delDictType, refreshDictType } from '@/api/dict.js'
import EditModel from './modules/editModel'
import DictdataModal from '@/views/sys/dict-data/showModal.vue'

export default {
    mixins: [SimpleTableMixins],
    components: {
        EditModel,
        DictdataModal
    },
    data() {
        let that = this
        return {
            action: {
                listAction: getDictTypes,
                deleteBenchAction: delDictType,
            },
            columns: [
                {
                    title: "字典名称",
                    key: "dictName",
                    minWidth: 120,
                    tooltip: true
                },
                {
                    title: "类型值",
                    key: "dictType",
                    minWidth: 120,
                    tooltip: true
                },
                {
                    title: "变更时间",
                    key: "createTime",
                    align: "left",
                    width: 190,
                    sortable: false,
                },
                {
                    title: "操作",
                    key: "action",
                    width: 220,
                    align: "center",
                    render: (h, params) => {
                        return h("div", {
                            class: 'table-operate-column'
                        }, [
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "info",
                                        size: "small",
                                        ghost: true,
                                    },
                                    style: {
                                        display: "inline-block",
                                    },
                                    on: {
                                        click: () => {
                                            that.handleEdit(params.row);
                                        },
                                    },
                                },
                                "修改"
                            ),
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "info",
                                        size: "small",
                                        ghost: true,
                                    },
                                    style: {
                                        display: "inline-block",
                                    },
                                    on: {
                                        click: () => {
                                            that.handleDeleteSingleById([params.row.id]);
                                        },
                                    },
                                },
                                "删除"
                            ),
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "info",
                                        size: "small",
                                        ghost: true,
                                    },
                                    style: {
                                        display: "inline-block",
                                    },
                                    on: {
                                        click: () => {
                                            that.showDictData(params.row);
                                        },
                                    },
                                },
                                "字典明细"
                            ),
                        ]);
                    },
                },
            ],
        };
    },
    methods: {
        showDictData(record) {
            this.$refs.dictdataModal.show(record)
        },
        handleRefreshCache() {
            refreshDictType().then(res=>{
                if (res.success) {
                    this.$Message.success("刷新成功！");
                } else {
                }
            })
        }
    },
    mounted() {
    },
};
</script>
  